<script setup>
import { ref, nextTick } from "vue";
import { store } from '@/js/store.js';
import { debounce, home_api } from '@/js/api.js';
import mobile from '@/pages/diymobile/index.vue'
import mobileView from './diy/diyview.vue'

defineProps({
	hashName: String,
});

const form = ref({})
const method = ref('add');
const dialogView = ref(false);
const viewRef = ref(null);
//修改页面结束事件
function editComplete(obj, type) {
	if(type.viewShow){
		method.value = 'edit';
		form.value = obj;
		dialogView.value = true;
		nextTick(() => {
			viewRef.value.init?.();
		})
        return;
	}
	console.log("🚀 ~ editComplete ~ obj:", obj)
}


</script>

<template>
	<div class="box">
		<mobile :form="form" :method="method" @tohost="editComplete" />

        <!-- 预览 -->
        <el-drawer v-model="dialogView" title="预览" direction="btt" size="96%" :with-header="false">
            <mobile-view ref="viewRef" :form="form" @tohost="dialogView=false" />
        </el-drawer>
	</div>
</template>

<style scoped>
.box {
	height: 100%;
}

.mainbox {
	height: 100%;
	width: 90%;
	margin: 0 auto;
}

h1 {
	width: 100%;
	margin: 1em auto;
	text-align: center;
}
</style>
<style></style>